利用js写的见缝插针小游戏（推荐给新手)

标题之所以写推荐给新手，是因为我也是个刚学js一周的新人，想练练手，于是就花了一下午写了这个游戏，所以我写的可能更适合新手，大神勿喷。

这个游戏是利用原生的js以及html5的canvas技术做的一个小游戏，游戏规则跟手机上的见缝插针一样的，这是我的游戏界面：

这个是无限插针的，就是针有无限多，直到你失败了或是点击reset按钮停止.

以下把我的源码贴出来供大家参考：

js代码：

var ctx;//工具
var canvas;//画布
var canalpha=0;
var cirradius=100;
var smciradius=15;
var ani=false;//动画是否在进行中
var speed=30;//针的速度
var ins=false;//是否可以触发insert动画
var n=0;//针的步长
var num=1;//针的编号
var angel=[];//各针停留时的角度数组
angel[0]=0;//初始化为1根针时设定，可改变
var speed2=200;//旋转速度
var over=false;//游戏结束标志
var INTERID;//周期函数ID

function drawmap() {ctx.fillStyle = "rgba(50%,25%,25%,0.5)";ctx.translate(250, 250);ctx.rotate(canalpha);ctx.translate(-250, -250);ctx.beginPath();ctx.arc(250, 250, cirradius, 0, Math.PI * 2, true);ctx.moveTo(250, 350);ctx.lineTo(250, 450);ctx.closePath();ctx.fill();ctx.stroke();ctx.fillStyle = "rgba(0,0,0,0.5)";ctx.beginPath();ctx.arc(250, 465, smciradius, 0, Math.PI * 2, true);ctx.closePath();ctx.fill();if(!ins) {drawNail(num);}else{nailact(num);}for (var j = 1; j <= angel.length; j++) {ctx.fillStyle = "rgba(0,0,0,0.5)";//由于填充颜色只能用于一次路径或fill函数，所以需放在循环内
            ctx.beginPath();ctx.arc(250 + Math.sin(angel[j]) * 215, 600 - (350 - Math.cos(angel[j]) * 215), smciradius, 0, Math.PI * 2, true);ctx.moveTo(250 + Math.sin(angel[j]) * 200, 450 - (200 * (1 - Math.cos(angel[j]))));ctx.lineTo(250 + Math.sin(angel[j]) * 100, 450 - (200 - Math.cos(angel[j]) * 100));ctx.fill();ctx.stroke();ctx.closePath();ctx.fillStyle = "#FFFFFF";ctx.fillText(j, 247 + Math.sin(angel[j]) * 215, 605 - (350 - Math.cos(angel[j]) * 215));}}function mapact(){canvas=document.getElementById("canvas");ctx=canvas.getContext("2d");if(!over) {ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);ctx.save();drawmap();ctx.restore();overgame();canalpha += Math.PI / speed2;}else{window.clearInterval(INTERID);var pa=document.createElement("p");pa.innerHTML="You Lose!!";document.getElementById("info").appendChild(pa);}
}function nailact(i){ctx.fillStyle="rgba(0,0,0,0.5)";if((350-(n+1)*speed)>=215) {ctx.beginPath();ctx.arc(250 + Math.sin(canalpha) * (350 - n * speed), 600 - (350 - Math.cos(canalpha) * (350 - n * speed)), smciradius, 0, Math.PI * 2, true);ctx.closePath();ctx.fill();ctx.fillStyle = "#FFFFFF";ctx.fillText(i, 247 + Math.sin(canalpha) * (350-n*speed), 605 - (350 - Math.cos(canalpha) * (350 - n * speed)));n++;}else{/*ctx.beginPath();
        ctx.arc(250 + Math.sin(canalpha) * 215, 600 - (350 - Math.cos(canalpha) * 215), smciradius, 0, Math.PI * 2, true);
        ctx.moveTo(250+ Math.sin(canalpha) * 200,450-(200*(1 - Math.cos(canalpha))));
        ctx.lineTo(250+ Math.sin(canalpha) * 100, 450-(200 - Math.cos(canalpha) *100));
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        ctx.fillStyle = "#FFFFFF";
        ctx.fillText(j, 247 + Math.sin(canalpha) *215, 605 - (350 - Math.cos(canalpha) * 215));* / * 尝试画面无闪顿的方法*/
        angel[i]=canalpha;num++;n=0;ins=false;}}
function drawNail(i){ctx.fillStyle="rgba(0,0,0,0.5)";ctx.beginPath();ctx.arc(250+Math.sin(canalpha)*350,600-(1-Math.cos(canalpha))*350,smciradius,0,Math.PI*2,true);ctx.closePath();ctx.fill();ctx.fillStyle="#FFFFFF";ctx.fillText(i,247+Math.sin(canalpha)*350,605-(1-Math.cos(canalpha))*350);}
function run(){var but=document.getElementById("run");but.disabled = true;//按钮变得不可用
        ani=true;//开启动画
        INTERID=setInterval(mapact,30); //number=1000/fps

}function insert(){  //接受用户的插入指令
    var but2=document.getElementById("insert");if(ani){ins=true;}else{return;}
}function overgame()//判断游戏是否结束
{for(var j=0;j<angel.length;j++) {if ((Math.abs(Math.sin((angel[num-1] - angel[j]) / 2))<3/43)&&(j!=num-1)) {over = true;}}
}function ref()
{window.location="yx.html";}window.onload=function(){var but=document.getElementById("run");but.disabled = false;mapact();
}

这是我的html代码（yx.html）：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="cc.js"></script>
</head>
<body><canvas id="canvas" width="700px" height="700px"></canvas><div id="info"></div><input type="button" value="run" οnclick="run()" id="run"/><input type="button" value="insert" οnclick="insert()" id="insert"/><input type="button" value="reset" οnclick="ref()" id="reset"/>
</body>
</html>

代码中有一些变量是直接用数字给出的，一些是位置数据，这个可以根据你们的需要更改，另一些是根据位置数据计算出的，最初设计时没有把他设置成全局变量是我的失误，以后再写代码时会注意的，游戏结束判定是根据角度之差是否满足两球互不相碰判定的。

个人感觉基本流程有三点：

1.明白游戏之后，先画出初始界面

2.写出游戏的动画

3.写出游戏的一些判断逻辑，最后修饰一下界面即可。

这是我的感受，给大家分享一下，就是这样。

利用js写的见缝插针小游戏（推荐给新手)相关推荐

利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
教你前端如何用js写一个跑酷小游戏
在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言不知不觉夏天又到了,提到夏天你们能想到 ...
利用JavaScript写猜数字小游戏
要求: 在页面中写一个猜数字的游戏: 要求: 1)生成0~100之间的随机数,让用户猜 2)输入错误需要提示,并让用户重新输入 3)输入正确,提示正确,并询问是否继续游戏结果如下: ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
基于HTML5canvars的小游戏,利用HTML5实现Canvas激流勇进小游戏代码
特效描述:利用HTML5实现 Canvas 激流勇进小游戏代码.利用HTML5实现Canvas激流勇进小游戏代码代码结构 1. 引入JS 2. HTML代码进入游戏游戏玩法:使用左键.右键和上 ...
linux 剪刀石头布c语言,利用C语言编写“剪刀石头布”小游戏
前言大家好~ 我是一名C语言初学者,学了C语言基础后,我制作了一个小游戏:剪刀石头布. 希望大家能对我的思路和代码提出小Tips(eg.更简便的方法与程序) 我也会虚心接受大家的建议~ 一.游戏原理 ...
见缝插针小游戏（基于OPENGL）|计算机图形学
见缝插针小游戏 (基于OPENGL)|计算机图形学 1.前言最近开始学习图形学,试着用glut做了一个小游戏,也是之前见得蛮多的小游戏叫做见缝插针,基本上功能都实现了,可能还有些不足,之后有机会再改 ...
用unity来开发见缝插针小游戏
最近通过学习见缝插针小游戏来总结上周所学的一些知识点. 思路:设置一个旋转的白色圆盘,当下面的针向圆盘发射,到达圆盘边缘位置后,跟随圆盘一起运动,并记录分数.当分数达到某个数之后,圆盘转动的速度和方向 ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...

利用js写的见缝插针小游戏（推荐给新手)

利用js写的见缝插针小游戏（推荐给新手)相关推荐

最新文章

热门文章