html5--用cavas做一个小游戏

最新推荐文章于 2021-07-03 14:54:36 发布
最新推荐文章于 2021-07-03 14:54:36 发布
阅读量920 收藏 1
点赞数 1
分类专栏： html5和css3 文章标签： canvas html5 html5和css3 游戏 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu506039293/article/details/48133495
版权 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<button οnclick="btn_click()" id="btn" style=" position: absolute;  left: 530px;  top: 20px;">开始游戏</button>
<body onLoad="window_start()">
<canvas id="canvas" width="500px" height="500px"></canvas>
</body>
</html>
<script type="text/javascript" src="抓球小游戏.js">

</script>


// JavaScript Documentvar canvas;
var context;
var speedX=5;
var speedY=5;
var x;
var y;
var flag;
function window_start()
{
	canvas=document.getElementById("canvas");
	context=canvas.getContext('2d');
	context.save();
	context.fillStyle="#999999";
	context.fillRect(0,0,500,300);
	context.restore();
	document.getElementById("canvas").οnmοuseup=canvas_mouseup;//注册鼠标事件
}
function btn_click()
{
	x=Math.random()*(500-10);
	y=Math.random()*(300-10);
	flag=setInterval("draw()",100);//画小球
}
function draw()
{
    context.clearRect(0,0,canvas.width,canvas.height); 
	context.fillStyle="#999999";
	context.fillRect(0,0,500,300);
	x+=speedX;
	y+=speedY;
	context.save();
	context.beginPath();
	context.fillStyle="#3300FF";
	context.arc(x,y,5,0,2*Math.PI,0);
	if(x<10)
	{
        x=10;
		speedX=-speedX;     
	}
	if(x>490)
	{
		x=490;
		speedX=-speedX;
	}
	if(y>290)
	{
		y=290;
		speedY=-speedY;
	}
	if(y<10)
	{
		y=10;
		speedY=-speedY;
	}
	context.fill();
	context.closePath();
	context.restore();		
}
function canvas_mouseup(ev)
{
	var dx;
	var dy;
	dx=ev.pageX-document.getElementById("canvas").offsetLeft-x;
	dy=ev.pageY-document.getElementById("canvas").offsetTop-y;
	if(dx<=5&&dx>=-5)
	if(dy<=5&&dy>=-5)
	{
		alert("是在下输了！");
		
	}
}

最后再说两句：
a.parseInt():
是用来解析字符串，返回值是整数。有几个特点：
1.    无视被解析字符串最前和最后的空格，即：" 111 "和"111"是一样的
  2.  正规格式是parseInt(string,radix)。radix可以省略，为0或者2-36之间的整数，用来表示被解析数值的进制。（注意不是解析返回结果的进制）。如果radix不在此范围内，返回NaN
   3. 如果radix 省略或者为0，则按默认进制对string进行解析。
    4.string的首字符为0,则默认解析为8进制。string首字符为0x则默认解析为16进制。其他情况默认为10进制。
   5. 解析从第一个可以解析的字符开始，到第一个不能解析的字符（如空格，标点符号等）结束。后面的字符不再解析。
    6.如果第一个字符不可以解析，则返回NaN。如"a8989"（拓展阅读http://www.51testing.com/html/49/145949-853768.html）

b.关于这句ev.pageX-document.getElementById("canvas").offsetLeft-BallX
获取鼠标中点与小球的偏移
pageX获取鼠标位置(关于这点，拓展阅读http://jo2.org/javascript-get-mouse-coordinates/)
offsetLeft是dom对象的共有属性返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。


刘泽豪真讨厌
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas实现的小游戏
01-06
利用html5 canvas制作的小游戏。
用HTML5制作一个简单的弹力球游戏
09-28
主要介绍了用HTML5制作一个简单的弹力球游戏,主要还是利用到了HTML5的Canvas API,需要的朋友可以参考下
用HTML5开发一个小游戏
weixin_33719619的博客
07-14 761
先上效果图 开始之前的准备 game.html js/ 里面创建game.js images/ 里面放三张图片，一张背景图片(background.png)，一张英雄图片(hero.png)，一张怪物的图片(monster.png) 在game.html里面写上以下几行简单的HTML代码： <!DOCTYPE h...
零基础H5小游戏傻瓜教程_教您如何制作微信小游戏
weixin_30735745的博客
08-06 1556
微信H5游戏是商家做宣传推广优先选择的方式，一个优质的小游戏，既能娱乐大众，又能宣传企业品牌，为商家增加网站流量。为此，很多商家都会想做一个h5游戏进行宣传推广自己的品牌、产品，那么微信h5游戏怎么制作呢，请看下面详细的h5游戏教程。 　　微信h5游戏怎么制作 　　其实要从根本上解答这个问题的话，就涉及程序开发领域了。一般情况下，商家做的H5小游戏都是借助第三方平台...
如何利用HTML5快速开发一款小游戏
ccnanxi的博客
11-11 4522
如何利用HTML5开发一款小游戏？Cocos2d-js是一款流行的H5游戏开发框架，介绍Cocos2d－js的核心技术和使用方法，学完以后可以独立开发一款休闲游戏，主要介绍cocos2d－js中的图层控制，用户交互，场景跳转，碰撞检测，数组集合，粒子效果，动画播放等知识。 第1章 添加图片和文字   主要讲解Cocos2d-js添加图片精灵和文字，设置它们的坐标，并且改变字体的颜色 第2章
html5 canvas-2.用canvas制作一个猜字母的小游戏
01-21
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的...
HTML5-Canvas刀枪不入躲避小游戏代码.zip
07-11
代码片段：  <li>1. 避免红点。  <li>2. 触摸绿色点刀枪不入。  <li>3. 停留在中心, 不要接触侧面 ... <li>4. 使用不易破坏的红点。... <li>5. 通过到处移动来获得额外的分数。  <li>6. 活下去</li>
HTML5 Canvas射箭小游戏
06-24
"HTML5 Canvas射箭小游戏"是利用Canvas API创建的一款轻量级的在线娱乐应用，旨在提供一个简单的射箭体验，让用户通过鼠标或触摸操作进行游戏。 在这款游戏中，Canvas API扮演了核心角色，它提供了画布元素，开发者...
HTML5 canvas射击鸭子小游戏.zip
07-11
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上绘制2D图形，无需借助任何插件。这个“HTML5 canvas射击鸭子小游戏”利用了Canvas的特性，为用户提供了有趣的交互体验。在这个游戏中，玩家可以控制角色...
自已做的一个html5经典小游戏
彦大叔-blog
08-09 743
自已做了一个html5的经典小游戏，这游戏很小很小的时候玩过，所以自已也想跟着做一个，不过这游戏叫什么也忘了，所以取名为board，因为不知道名字叫什么，所以都百度不到，只能凭记忆去做。不好的地方请吐槽。       在线demo:http://1.borad.sinaapp.com/ ...
利用HTML5 Canvas制作一个简单的打飞机游戏
12-13
之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。 　　闲话不多说，先上DEMO撒：飞机游戏   楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。 　　步入主题啦：打飞机游戏文件有index.html入口文件，allSprite.js精灵的逻辑处理文件，loading.js加载处理文件以及data.js（初始化的一些数据）。 　　首先，正常的
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
HTML5 Canvas游戏开发实战(实例源代码)
02-05
HTML5 Canvas 游戏开发实战一书配套代码
HTML5 CSS3实现的网页版五彩连珠小游戏.html
10-23
HTML5 CSS3实现的网页版五彩连珠小游戏，点击小球进行排列，颜色一致的五个自动消除，以前传统的HTML+jquery也可实现此类游戏，还有动画效果，相信HTML5版本的要比此前的传统版本更好玩，有更好的操作体验，也欢迎大家研究代码。
【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
weixin_30553777的博客
08-21 425
//V1.0 : 实现棋子的布局，画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 ：实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess 项目在线预览地址： http://htmlpreview.githu...
html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
weixin_39631017的博客
05-30 254
之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。闲话不多说，先上DEMO撒：飞机游戏 楼主写这个人纯碎娱乐，没想着写成多正式的游戏哈。步入...
HTML5用canvas制作飞机大战小游戏
qq_29691213的博客
07-03 662
css样式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
canvas动画
ck2580的博客
05-10 2700
canvas与动画 1. 什么是canvas canvas 是一个可以使用脚本(通常为 JavaScript 来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. <canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。 Canvas API 提供了一个通过 JavaScript 和 HTML 的 canvas 元素来绘制图形的方式。它可以用于
用 HTML5 canvas制作一个小游戏生成源代码
最新发布
06-07
好的，下面是一个简单的 HTML5 canvas 小游戏的源代码，实现了一个小球在屏幕上弹跳的效果： ``` <!DOCTYPE html> <html> <head> <title>Canvas Game</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="gameCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; } setInterval(draw, 10); </script> </body> </html> ``` 这个小游戏的实现比较简单，主要是通过不断地更新小球的位置来实现弹跳的效果。你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值