簡介： 很喜歡研究小遊戲，因爲算法的研究讓我感到很有成就感，就從比較基礎開始學起。這是一個以javascript+H5的canvas小遊戲。以像素點在canvas畫布上畫出每一個動作，以每秒24個像素點的速度來模擬逐幀動畫，讓它不再是跳動移動。這個代碼直接複製粘貼爲html文件即可運行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>snake</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="title"><label id='title'></label></div>
<canvas id="myCanvas" width="1080" height="720" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var ctx=document.getElementById("myCanvas").getContext("2d");
var title = $('#title');
var r = [{x:100,y:30}];//豎的座標
var co=40;
var speed = 24;//初始化速度
var e=null;
var l=null;//鼠標方位
var s1;
var s2;
ctx.fillStyle='blue';
$(document).ready(function(){
int();//初始化數據
s1 = setInterval(start,speed);//定時器
$('body').mousemove(function(e) {
var x = e.originalEvent.x || e.originalEvent.layerX || 0;
var y = e.originalEvent.y || e.originalEvent.layerY || 0;
l = {y:y,x:x};
});
});
document.onkeyup = function(event){
clearTimeout(s2);
speed = 24;
};
document.onkeydown = function(){
if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){
co = event.keyCode;
}
s2 = setTimeout(fly, 2000);
}
function start(){
stop();//結束
eat();//吃果實
r.unshift(r.pop());//尾接到頭
keyboard();//鍵盤控制
clear();
fruit();//畫果實
snake();//畫蛇
}
//初始化數據
function int(){
for(var i=1; i<20; i++){
var temp = {x:100,y:r[0].y+1};
r.unshift(temp);
}
}
//吃到果實，增加身體長度
function add(){
for(var i=0; i<5; i++){
var temp1;
switch(co){
case 37:
temp1 = {x:r[0].x-1,y:r[0].y};
break;
case 38:
temp1 = {x:r[0].x,y:r[0].y-1};
break;
case 39:
temp1 = {x:r[0].x+1,y:r[0].y};
break;
case 40:
temp1 = {x:r[0].x,y:r[0].y+1};
break;
}
r.unshift(temp1);
}
}
//頭吃到身
function check(e,j){
for(var i=0;i<r.length;i++){
if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
}
return false;
}
//停止
function stop(){
if( r[0].x < 0 || r[0].x >= 1080 || r[0].y < 0 || r[0].y >= 720){
alert("game over\nYou get ["+(r.length-2)+"]");
clearInterval(s1);
return false;
}//咬到自己或碰到牆壁，不再執行
}
//鍵盤控制
function keyboard(){
r[0].x = r[1].x;
r[0].y = r[1].y;
switch(co){
case 37:
r[0].x = r[1].x - 1;
break;
case 38:
r[0].y = r[1].y - 1;
break;
case 39:
r[0].x = r[1].x + 1;
break;
case 40:
r[0].y = r[1].y + 1;
break;
}
}
//加速
function fly(){
speed=speed-0.1;//加速
}
//吃果實
function eat(){
if(e){
title.text('果實橫座標:'+e.x+'果實縱座標:'+e.y+'蛇橫座標:'+r[0].x+'蛇縱座標:'+r[0].y+'蛇的長度'+r.length+'速度'+speed);
if(r[0].y>=e.y-10&&r[0].y<=e.y+10&&r[0].x<=e.x+10&&r[0].x>=e.x-10){
add();//碰到果實加到蛇身長度
e=null;//把果實清空
}
}
}
//畫果實
function fruit(){
if(e)ctx.fillRect(e.x,e.y,10,10);
while(e==null || check(e)){
e={y:(Math.random()*710 >>>0),x:(Math.random()*1070 >>>0)};
}
}
//畫蛇
function snake(){
for(var i=0;i<r.length;i++){
ctx.fillRect(r[i].x,r[i].y,10,10);
}
}
//清理畫布
function clear(){
ctx.clearRect(0,0,1080,720);//清空畫布
}
</script>
</body>
</html>希望有喜歡的或志同道合的朋友一起交流。關注我
