HTML section
<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no" >
<title> Big snake battle </title>
<style type= "Text/css" >
#gamepanel {
width:320px;
margin:0 Auto;
height:568px;
position:relative;
Overflow:hidden;
BORDER:1PX Solid #ccc
}
body{
padding:0;
margin:0;
}
</style>
<body>
<div id= "Gamepanel" >
<canvas id= "Canvas" width= "height=" > "568"
The current browser does not support canvas, please change your browser and try again
</canvas>
</div>
<script src= "Countdown.js" ></script>
</body>
JS section
Window.onload=function () {
Window_width = 512
window_height = 480
var Canvas=document.getelementbyid (' canvas ');
var context=canvas.getcontext (' 2d ');
Game objects
var snake = {
jiaodu:180,
SPEED:80,//pixels moved per second
x: (CANVAS.WIDTH/2),
Y:CANVAS.HEIGHT/2,
R:10,
Body: [
{
x: (CANVAS.WIDTH/2),
Y:CANVAS.HEIGHT/2,
}
],
snakelength:100
};
Map objects
var Ditu = {
W:canvas.width*3,
H:canvas.height*3,
Canzhao: {
X:CANVAS.WIDTH*3/2,
Y:CANVAS.HEIGHT*3/2,
},
item:{
x:0,
y:0
},
Snake:null,
ARR: [
{
X:CANVAS.WIDTH/2 +200,
Y:CANVAS.HEIGHT/2-200,
Color: "Yellow"
},
{
X:CANVAS.WIDTH/2 +200,
Y:CANVAS.HEIGHT/2 +200,
Color: "#ccc"
},
{
X:CANVAS.WIDTH/2-200,
Y:CANVAS.HEIGHT/2 +200,
Color: "Blue"
},
{
X:CANVAS.WIDTH/2-200,
Y:CANVAS.HEIGHT/2-200,
Color: "#ccc"
}
]
}
Console.dir (DITU.W)
Rocker Lever
var Yaogan = {
Kg:false,
jiaodu:180,
R:60,
Click: {
X:60+10,
Y:CANVAS.HEIGHT-110,
},
Gan: {
X:60+10,
Y:CANVAS.HEIGHT-110,
R:20
},
Dot: {
X:60+10,
y:canvas.height-110
}
}
Console.dir (Yaogan.dot)
Binding events
Canvas.addeventlistener (' Touchstart ', touch,false);
Canvas.addeventlistener (' Touchmove ', touch,false);
Canvas.addeventlistener (' Touchend ', touch,false);
function Touch (event) {
var event = Event | | Window.event
Switch (event.type) {
Press the screen
Case "Touchstart":
yaogan.kg = true;
yaogan.click.x = Math.Round (EVENT.TOUCHES[0].CLIENTX);
YAOGAN.CLICK.Y = Math.Round (Event.touches[0].clienty);
Break
Leave the screen
Case "Touchend":
yaogan.kg = false;
yaogan.click.x = Yaogan.dot.x;
YAOGAN.CLICK.Y = Yaogan.dot.y;
Break
Touch Slide
Case "Touchmove":
Stop bubbling
Event.preventdefault ();
yaogan.kg = true;
Yaogan.click = {X:math.round (event.touches[0].clientx), Y:math.round (Event.touches[0].clienty)};
Break
}
}
var panduanjiaodu = function () {
var x = yaogan.click.x
var y = yaogan.click.y
if (x > Yaogan.dot.x && y > Yaogan.dot.y) {
So the angle is between 0 and 90.
Yaogan.jiaodu = Math.floor ((Math.atan (Y-YAOGAN.DOT.Y)/(x-yaogan.dot.x) *180/math.pi))
}
if (x < yaogan.dot.x && y > Yaogan.dot.y) {
So the angle is between 90 and 180.
Yaogan.jiaodu = Math.floor ((Math.atan ((yaogan.dot.x-x)/(Y-YAOGAN.DOT.Y)) *180/math.pi) +90
}
if (x < yaogan.dot.x && y < Yaogan.dot.y) {
So the angle is between 180 and 270.
Yaogan.jiaodu = Math.floor ((Math.atan ((yaogan.dot.y-y)/(yaogan.dot.x-x)) *180/math.pi) +180
}
if (x > Yaogan.dot.x && y < Yaogan.dot.y) {
So the angle is between 0 and 90.
Yaogan.jiaodu = Math.floor ((Math.atan ((yaogan.dot.x-x)/(Y-YAOGAN.DOT.Y)) *180/math.pi) +270
}
}
var update = function (modifier) {
Snake.body.length = Snake.snakelength
Limit the angle of steering per second
if (yaogan.kg) {
if (Math.Abs (yaogan.jiaodu-snake.jiaodu) <180) {
if (yaogan.jiaodu-snake.jiaodu>0) {
Snake.jiaodu +=120*modifier
}
if (yaogan.jiaodu-snake.jiaodu<0) {
Snake.jiaodu-=120*modifier
}
}
if (Math.Abs (yaogan.jiaodu-snake.jiaodu) >180) {
if (yaogan.jiaodu-snake.jiaodu>0) {
Snake.jiaodu-=120*modifier
}
if (yaogan.jiaodu-snake.jiaodu<0) {
Snake.jiaodu +=120*modifier
}
}
if (snake.jiaodu>360) {
Snake.jiaodu-= 360
}
if (snake.jiaodu<0) {
Snake.jiaodu + = 360
}
}
Limit the joystick out
var absx = Math.Abs (yaogan.click.x-yaogan.dot.x)
var Absy = Math.Abs (YAOGAN.CLICK.Y-YAOGAN.DOT.Y)
if (Math.sqrt (Math.pow (absx,2) +math.pow (absy,2)). toFixed (1) < (YAOGAN.R-YAOGAN.GAN.R)) {
yaogan.gan.x = yaogan.click.x
YAOGAN.GAN.Y = Yaogan.click.y
} else {
yaogan.gan.x = Yaogan.dot.x-math.floor ((YAOGAN.R-YAOGAN.GAN.R) *math.sin (math.pi* (yaogan.jiaodu-90)/180). ToFixed ( 5))
YAOGAN.GAN.Y = Yaogan.dot.y + Math.floor ((YAOGAN.R-YAOGAN.GAN.R) *math.cos (math.pi* (yaogan.jiaodu-90)/180). ToFixed ( 5))
if (x > Yaogan.dot.x && y > Yaogan.dot.y) {
So the angle is between 0 and 90.
yaogan.gan.x = 0.yaogan.dot.x-math.floor (Yaogan.r*math.sin (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5))
YAOGAN.GAN.Y = Math.floor (Yaogan.r*math.cos (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5)) + Yaogan.dot.y
// }
if (x < yaogan.dot.x && y > Yaogan.dot.y) {
So the angle is between 90 and 180.
yaogan.gan.x = Yaogan.dot.x-math.floor (Yaogan.r*math.sin (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5))
YAOGAN.GAN.Y = Math.floor (Yaogan.r*math.cos (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5)) + Yaogan.dot.y
// }
if (x < yaogan.dot.x && y < Yaogan.dot.y) {
So the angle is between 180 and 270.
yaogan.gan.x = Yaogan.dot.x-math.floor (Yaogan.r*math.sin (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5))
YAOGAN.GAN.Y = Math.floor (Yaogan.r*math.cos (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5)) + Yaogan.dot.y
// }
if (x > Yaogan.dot.x && y < Yaogan.dot.y) {
So the angle is between 0 and 90.
yaogan.gan.x = Yaogan.dot.x-math.floor (Yaogan.r*math.sin (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5))
YAOGAN.GAN.Y = Math.floor (Yaogan.r*math.cos (math.pi* (yaogan.jiaodu-90)/180). ToFixed (5)) + Yaogan.dot.y
// }
}
Update Snake Head Traction coordinates
snake.x + = snake.speed * modifier * MATH.COS (math.pi*snake.jiaodu/180). toFixed (5)
Snake.y + = snake.speed * modifier * Math.sin (math.pi*snake.jiaodu/180). toFixed (5)
snake.x = Math.Abs (snake.x)
Snake.y = Math.Abs (SNAKE.Y)
Limit excess coordinates
if (Math.Abs (Math.floor (snake.x)-snake.body[0].x) >1 | | Math.Abs (Math.floor (SNAKE.Y)-snake.body[0].y) >1) {
Snake.body.unshift ({x:math.floor (snake.x), Y:math.floor (SNAKE.Y)})
}
if (Snake.body.length > Snake.snakelength) {
Snake.body.pop ()
}
Console.dir ("x=" +snake.body[0].x+ "&y=" +snake.body[0].y)
Get the change in the coordinates of the snake
ditu.item.x = SNAKE.BODY[0].X-CANVAS.WIDTH/2;
DITU.ITEM.Y = SNAKE.BODY[0].Y-CANVAS.HEIGHT/2;
for (var i in snake.body) {
if (i! = 0) {
snake.body[i].x = snake.body[i].x + x
Snake.body[i].y = snake.body[i].y + y
// }
// }
Console.dir ("x=" +x+ "&y=" +y)
Update map
ditu.canzhao.x = ditu.canzhao.x + (SNAKE.BODY[0].X-CANVAS.WIDTH/2);
DITU.CANZHAO.Y = Ditu.canzhao.y + (SNAKE.BODY[0].Y-CANVAS.HEIGHT/2);
Ditu.arr
};
Draw all the objects
var render = function () {
{
Painting background
Context.beginpath ()
Context.fillstyle = "White"
Context.fillrect (0,0,canvas.width,canvas.height);
Context.closepath ();
for (var i = 0; i < ditu.arr.length; i++) {
Context.beginpath ()
Context.fillstyle = Ditu.arr[i].color
Cont Ext.arc (ditu.arr[i].x-ditu.item.x, ditu.arr[i].y-ditu.item.y, 0, 2*math.pi)
Context.fill ()
}
}
//Draw Snake
Context.beginpath ()
Context.moveto (SNAKE.BODY[0].X-DITU.ITEM.X,SNAKE.BODY[0].Y-DITU.ITEM.Y)
for (var i in snake.body) {
//for (var i =0; i<snake.body.length; i++) {
if (i>0) {
Context.lineto (s Nake.body[i].x-ditu.item.x, snake.body[i].y-ditu.item.y)
}
}
Context.linecap = "Round";
Context.linejoin = "Round";
Context.linewidth = snake.r*2
Context.strokestyle = "#66ccff";
Context.stroke ();
Context.closepath ()
//Draw snake Head
Context.beginpath ()
Context.fillstyle = "Red"
Context.arc (snake.body[ 0].x-ditu.item.x, Snake.body[0].y-ditu.item.y, SNAKE.R, 0, 2*math.pi)
Context.fill ()
Context.closepath ()
Draw the circle of the joystick
Context.beginpath ()
Context.fillstyle = ' Rgba (204, 204, 204, 0.7) '
Context.arc (yaogan.dot.x, Yaogan.dot.y, 0, 2*math.pi)
Context.fill ()
Context.closepath ()
Context.beginpath ()
Context.fillstyle = ' Rgba (0, 0, 0, 0.5) '
Context.arc (yaogan.gan.x, YAOGAN.GAN.Y, YAOGAN.GAN.R, 0, 2*math.pi)
Context.fill ()
Context.closepath ()
if (yaogan.kg) {
Display parameters
Context.beginpath ();
context.font= "30px Arial";
Context.fillstyle= "Red";
Context.filltext ("x:" +math.floor (yaogan.gan.x) + "; Y:" +math.floor (YAOGAN.GAN.Y) + "; angle:" +snake.jiaodu,10,50);
Context.filltext ("x:" +math.floor (snake.x) + "; Y:" +math.floor (SNAKE.Y) + "; angle:" +snake.jiaodu,10,50);
Context.closepath ()
}
};
Game Main function
var main = function () {
var now = Date.now ();
var delta = now-then;
Update (delta/1000);
Panduanjiaodu ()
Render ();
then = Now;
Call the main function immediately
Requestanimationframe (main);
};
Browser compatibility processing for Requestanimationframe
var w = window;
Requestanimationframe = W.requestanimationframe | | W.webkitrequestanimationframe | | W.msrequestanimationframe | | W.mozrequestanimationframe;
var then = Date.now ();
Main ();
}
Big Snake battle Canvas implementation (mobile phone touch screen operation)--MAP logic
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
