HTML5小试 双人贪吃蛇
16lz
2021-01-22
<html>
<head>
</head>
<body>
<div style="float:left;">当前速度1：<button onclick="jiancl()">-</button><span id="sudu">300ms</span><button onclick="jiacl()">+</button></div>
<div style="float:right;">当前速度2：<button onclick="jiancl2()">-</button><span id="sudu2">300ms</span><button onclick="jiacl2()">+</button></div>
<canvas id="mcan" width="300px" height="200px" style="background-color:#CCFF99">您的浏览器版本过低</canvas>
</body>
<script type="text/javascript">
var st1 = "红方 GAMEOVER!",st2 = "蓝方 GAMEOVER!";
var obj = document.getElementById("mcan");
var ctx = obj.getContext("2d");//canvas对象
var width = 300,height = 200;
var len = 10;//模块长宽
var keyData = [{k:38,x:0,y:-len},{k:40,x:0,y:len},{k:37,x:-len,y:0},{k:39,x:len,y:0}];
var keyData2 = [{k:87,x:0,y:-len},{k:83,x:0,y:len},{k:65,x:-len,y:0},{k:68,x:len,y:0}];
//贪吃蛇
var data = [[220,20]];//初始位置
var data2 = [[20,20]];//初始位置
var eatData;
var sudu = 300,sudu2 = 300;
getSj();//要吃的位置
+function(){
ctx.fillStyle = "red";
ctx.fillRect(data[0][0],data[0][1],len,len);
ctx.fillStyle = "blue";
ctx.fillRect(data2[0][0],data2[0][1],len,len);
//ctx.moveTo(0,0);
//ctx.lineTo(50,20);
//ctx.stroke();
}();
var si,i,si2,i2;
document.onkeydown = function(e){
var kcode = e.keyCode;
if(kcode<97){
if(kcode>36&&kcode<41){
i = -1;
if(kcode==38){i=0}
else if(kcode==40){i=1}
else if(kcode==37){i=2}
else if(kcode==39){i=3}
if(i!=-1){
clearInterval(si);
si = window.setInterval("testFunction()",sudu);
animateDraw();
}
}else{// 87 83 65 68
i2 = -1;
if(kcode==87){i2=0}
else if(kcode==83){i2=1}
else if(kcode==65){i2=2}
else if(kcode==68){i2=3}
if(i2!=-1){
clearInterval(si2);
si2 = window.setInterval("testFunction2()",sudu);
animateDraw2();
}
}
}else{
//188 190 97 98
if(kcode==188){
jiancl2();
}else if(kcode==190){
jiacl2();
}else if(kcode==97){
jiancl();
}else if(kcode==98){
jiacl();
}
}
}
function jiancl(){
clearInterval(si);
sudu = sudu-10;
document.getElementById("sudu").innerHTML = sudu+"ms";
si = window.setInterval("testFunction()",sudu);
animateDraw();
}
function jiancl2(){
clearInterval(si2);
sudu2 = sudu2-10;
document.getElementById("sudu2").innerHTML = sudu2+"ms";
si2 = window.setInterval("testFunction2()",sudu2);
animateDraw2();
}
function jiacl(){
clearInterval(si);
sudu = sudu+10;
document.getElementById("sudu").innerHTML = sudu+"ms";
si = window.setInterval("testFunction()",sudu);
}
function jiacl2(){
clearInterval(si2);
sudu2 = sudu2+10;
document.getElementById("sudu2").innerHTML = sudu2+"ms";
si2 = window.setInterval("testFunction2()",sudu2);
}
function testFunction(){
animateDraw();
}
function testFunction2(){
animateDraw2();
}
function animateDraw(){
if(i!=-1){
var x = data[0][0]+keyData[i].x;
var y = data[0][1]+keyData[i].y;
for(var m = 0;m<data2.length;m++){
if(m!=0){
if(x==data2[m][0]&&y==data2[m][1]){
alert(st1);
clearInterval(si);
return;
}
}else{
if(x==data2[0][0]&&y==data2[0][1]){
if(data.length>data2.length){
alert(st2);
clearInterval(si);
return;
}else{
alert(st1);
clearInterval(si);
return;
}
}
}
}
if(x>=0&&x<width&&y>=0&&y<height){
if(x==eatData[0]&&y==eatData[1]){
getSj();
}else{
draw("#CCFF99",data.pop());
}
data.unshift([x,y]);
draw("red",data[0]);
}else{
clearInterval(si);
alert(st1+" GAME OVER!");
}
}
}
function animateDraw2(){
if(i2!=-1){
var x = data2[0][0]+keyData2[i2].x;
var y = data2[0][1]+keyData2[i2].y;
for(var m = 0;m<data.length;m++){
if(m!=0){
if(x==data[m][0]&&y==data[m][1]){
alert(st2);
return;
}
}else{
if(x==data[0][0]&&y==data[0][1]){
if(data2.length>data.length){
alert(st1);
clearInterval(si);
return;
}else{
alert(st2);
clearInterval(si);
return;
}
}
}
}
if(x>=0&&x<width&&y>=0&&y<height){
if(x==eatData[0]&&y==eatData[1]){
getSj();
}else{
draw("#CCFF99",data2.pop());
}
data2.unshift([x,y]);
draw("blue",data2[0]);
}else{
clearInterval(si2);
alert(st2);
}
}
}
function getSj(){
var now=new Date();
var x = now.getSeconds()%(width/len-1)*len;
var y = now.getSeconds()%(height/len-1)*len;
var b = false;
for(var m = 0;m<data.length;m++){
if(m.x==x&&m.y==y)b = true;
}
if(!b){
eatData = [x,y];
draw("#"+randomColor(),eatData);
}
}
function randomColor(){
var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
if(rand.length == 6){
return rand;
}else{
return randomColor();
}
}
function draw(a,b){
ctx.fillStyle = a;
ctx.fillRect(b[0],b[1],len,len);
}
</script>
</html>
更多相关文章
- html5 地理位置定位的时候，想用enableHighAccuracy提高精确度，但是
- 在PHP中更改关联数组索引的位置
- 按钮和文本移回原始位置
- 评论： 网页浏览速度提高切实可行的七个方法
- 准备好的报表没有速度效益吗?
- 请问MySql 可以处理8千万条以上的记录吗, 速度有没SQL2000快?
- ubuntu_mysql怎么判断自己的库和头文件的位置
- centos7 移动mysql5.7.19 数据存储位置
- js金额数字格式化实现代码(三位加逗号处理保留两位置小数)