基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏
最近折腾一个自己个人主页,无奈履历太渣,能放在首页的东西不多,于是想给自己的个人主页上添加一个小游戏。遂参考了各种教程,使用HTML5的canvas元素做了一个相当原始的东西出来,效果如图~
QQ截图20160325110909.png
如图所示,右边是一个目标靶子,当我们点击start按钮后它会以一个特定的速度上下来回移动。靶子动起来之后我们点击shoot按钮就会从左边射出一支“箭”(其实就是一条红线啦(⊙﹏⊙))。这支箭射中靶子后根据你射中的位置有0到10十个级别的分数。Ok,接下来是源码。主要是在两个循环里面移动箭和靶子的位置,不断调用制绘制它们的方法。然后用一个主循环不断判定游戏是否终止。
您的浏览器不支持canvas,请使用chrome或者firefox体验~
Start
shoot
var canvas = document.getElementById("canvas");
var cans = canvas.getContext("2d");
cans.strokeStyle = "grey";
cans.strokeRect(0, 0, 360, 500);
cans.moveTo(0, 250);
cans.arc(0, 250, 28, 0.5 * Math.PI, 90 + Math.PI);
cans.stroke();
var targetInterval, arrowInterval;
var started = false;
var targetUp = 0;
var target = {x: 356, y: 10, w: 2, h: 160};
var arrow = {x: 1, y: 250, len: 50};
drawArrow = function () {
cans.fillStyle = 'red';
cans.fillRect(arrow.x, arrow.y, arrow.len, 1);
};
clearArrow = function () {
cans.clearRect(arrow.x, arrow.y - 1, arrow.len, 2);
};
drawTarget = function () {
cans.fillStyle = 'green';
cans.fillRect(target.x, target.y, target.w, target.h);
for (var yi = target.y, xi = target.x, hi = target.h; yi < target.y + target.h / 2; yi += 8, xi -= 2, hi -= 16) {
cans.fillRect(xi, yi, 2, hi);
}
};
clearTarget = function () {
cans.clearRect(target.x - 20, target.y, 22, target.h);
};
drawArrow();
drawTarget();
moveArrow = function () {
clearArrow();
arrow.x += 2;
drawArrow();
};
moveTarget = function () {
clearTarget();
if (targetUp == 0) {
target.y += 2;
if (target.y + target.h > 490) {
targetUp = 1;
}
} else {
target.y -= 2;
if (target.y < 10) {
targetUp = 0;
}
}
drawTarget();
};
function getScore() {
if (arrow.x + arrow.len < target.x - 2 * 9) {
return -1;
}
var yDiff = Math.abs(target.y + target.h / 2 - arrow.y);
var nCircle = Math.floor(yDiff / 8);
var tarX = target.x - 9 * 2 + 2 * nCircle;
if (arrow.x + arrow.len < tarX) {
return -1;
}
if (10 - nCircle < 0) {
return 0;
}
return 10 - nCircle;
}
startGame = function () {
clearArrow();
clearTarget();
started = true;
target.y = 10;
arrow.x = 1;
drawArrow();
drawTarget();
targetUp = 0;
targetInterval = setInterval(moveTarget, 50);
var mainInterval = setInterval(function () {
if (getScore() != -1) {
alert("you get score " + getScore());
clearInterval(arrowInterval);
clearInterval(targetInterval);
clearInterval(mainInterval);
started = false;
}
}, 10);
};
shoot = function () {
if (started) {
arrowInterval = setInterval(moveArrow, 10);
} else {
alert("you should click start first");
}
};
基于HTML5canvars的小游戏,HTML5之canvas简单射箭小游戏相关推荐
- html5抢红包游戏,HTML5手机微信抢红包福利袋游戏代码
HTML5手机微信抢红包福利袋游戏代码 HTML5手机微信抢红包福利袋游戏代码是一款手机移动端红包雨效果源码. js代码 $(function(){ var countdown=$(".co ...
- java弹球游戏代码_Java实现简单的弹球游戏
本文实例为大家分享了Java实现简单的弹球游戏的具体代码,供大家参考,具体内容如下 该程序主要是用于对java图形化界面编程进行联系,程序实现全部采用的是AWT包下的类. 程序仅做参考,供学习使用. ...
- python做好的程序如何变成小程序-使用python编写简单的小程序编译成exe跑在win10上...
每天的工作其实很无聊,早知道应该去IT公司闯荡的.最近的工作内容是每逢一个整点,从早7点到晚11点,去查一次客流数据,整理到表格中,上交给素未蒙面的上线,由他呈交领导查阅. 人的精力毕竟是有限的,所以 ...
- 游戏辅助丨手把手简单实现射击游戏逆向(1)
作者:问号哥 前言: 首先跟大家说说我对游戏辅助的理解.什么是游戏辅助呢?一是通过修改程序中的数据达到变态功能,比如变态血量,变态射速,飞天遁地:二是通过修改游戏程序代码的执行顺序,实现 ...
- javascript 和HTML5 利用canvas构建 猜牌游戏(让我猜猜你心中的牌)【图文说明】...
让我猜猜你心中的牌,先随机生成27张牌,不能重复 列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌. 如果是9张只要猜2次,如果是27张就是猜3次. 实现方法(27张): 如果 ...
- html5小圆点,HTML5的Canvas实现小圆点在屏幕内跑动
点击屏幕可以增加小圆点个数,效果如图: 完整代码如下,复制到HTML文件,打开即可运行. Hover /*@import url(http://fonts.googleapis.com/css?fam ...
- 迷宫游戏html5代码,css3实现的迷宫游戏
css3实现的迷宫游戏_网页代码站(www.webdm.cn) *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;paddin ...
- html5 流星雨,canvas简单流星雨
function lx(obj) { this.Id = obj.id; this.src = obj.src; //图片地址 this.img = ''; //图片 this.cxt = ''; / ...
- 物品分类游戏html5,整理物品的幼儿园分类游戏设计
整理物品的幼儿园分类游戏设计 设计思路: 在生活中,人们常需要将一些材料.物品进行收拾.整理,而学习收拾.整理物品对于中班幼儿来说就是一个学习分类的过程.让幼儿为分类并整理好的物品制作标记,能使幼儿对 ...
最新文章
- 《数据虚拟化:商务智能系统的数据架构与管理》一 1.11 数据集成的其他方式...
- Nilearn教程系列(4)-脑部地图集绘制
- 【转】Cannot find -ltinfo when compiling android 4.0.3
- VBScript - Round Function
- java web 集成dom4j_[JavaWeb基础] 031.dom4j写入xml的方法
- android功耗优化(2)--对齐唤醒
- Java Web文件下载
- 【UVALive - 6922】Reverse Polish Notation【贪心】
- 处女座的砝码-数学推论
- 小米路由器3潘多拉固件刷机教程
- Java SSM 项目实战 day09 SSMAOP日志
- 软件开发外包平台有哪些?收集的一些备用
- 游戏模型(3A)和影视模型(cg)的区别以及发展前景?
- 序列化(Serialization)
- AutoCAD快捷键大全
- 一个Java画图板程序的设计
- Latex Tips: 如何输入矩阵(illustrated in Jupyter Notebook)
- 如何挑选自己喜欢的colormap样式
- Word格式之参考文献交叉引用
- python输入日期选择日期_python输入日期输出星座?