大家快来看呀！！！H5小游戏：鼠标兼听+轨迹动画

最新推荐文章于 2022-03-27 18:42:03 发布
最新推荐文章于 2022-03-27 18:42:03 发布
阅读量374 收藏 1
点赞数
分类专栏： javascript h5 赚钱 爱好 it  初学者 大学生 刚入职场 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohuli414/article/details/79753557
版权
it  同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
初学者
14 篇文章 0 订阅
订阅专栏
刚入职场
13 篇文章 0 订阅
订阅专栏

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>躲避小游戏：鼠标兼听+轨迹动画</title>

<style>

a {

cursor: pointer;

}

html, body {

margin: 0;

padding: 0;

}

fieldset, img {

border: 0;

}

li {

list-style: none;

}

.pos{

position: relative;

top: -90px;

}

/*input[type="Submit"]{cursor:pointer;}*/

strong {

font-weight: bold;

}

body {

overflow: hidden;

font-family: 'Comfortaa', cursive;

font-size: 11px;

}

canvas {

background-color:#000;

background-position-x: initial;

background-position-y: initial;

background-size: cover;

background-repeat-x: initial;

background-repeat-y: initial;

background-attachment: initial;

background-origin: initial;

background-clip: initial;

background-position: center;

font-family: 'Comfortaa', cursive;

}

.ui {

border-radius: 50px 120px 120px;

font-family: 'Comfortaa', cursive;

font-size: 17px;

color: #fa3380;

background: linear-gradient(to right, rgba(2,

179, 228, 0.6) 0%, rgba(2, 204, 186,0.6) 100%);

position: absolute;

width: 70%;

}

#message {

border-radius: 50px 120px 120px;

padding: 70px;

position: relative;

margin: 0 auto;

-webkit-animation:colorchange 50s infinite

alternate;

}

#startButton {

margin-top: 50px;

}

#status {

width: 100%;

height: 15px;

padding: 8px;

display: none;

}

#status span {

color: #fff;

font-weight: bold;

margin-right: 20px;

}

#title {

text-transform: uppercase;

text-align: center;

margin-top: 10px;

color: #fa3380;

-webkit-animation:colorchange 7s infinite

alternate;

}

.ui a {

outline: none;

font-family: 'Comfortaa', cursive;

font-size: 38px;

width: 150px;

text-align: center;

margin: 0 auto;

text-decoration: none;

color: deepskyblue;

padding: 2px;

display: block;

-webkit-animation:colorchange 1s infinite

alternate;

}

.ui a:hover {

font-weight: bold;

background: linear-gradient(to right, rgba(2,

179, 228, 0.9) 0%, rgba(2, 204, 186,0.9) 100%);

border-radius: 50px 120px 120px;

}

@-webkit-keyframes colorchange {

0% {

color: darkviolet;

}

10% {

color: #fa3380;

}

20% {

color: rgba(2,179,228,0.8);

}

30% {

color: rgba(2,204,186,0.8);

}

40% {

color: rgba(169,81,237,0.8);

}

50% {

color: rgba(255,162,52,0.8);

}

60% {

color: rgba(255,84,131,0.8);

}

70% {

color: deepskyblue;

}

80% {

color: purple;

}

90% {

color: lightpink;

}

100% {

color: rgba(125,151,173,0.8);

}

}

</style>

</head>

<body>

<canvas id='world'></canvas>

<div id="status" class="ui"></div>

<div class="pos">

<div id="message" class="ui">

<h2 id="title">Survival Game</h2>

<ul>

<li>1. 避免白点。</li>

<li>2. 触摸绿色点刀枪不入。</li>

<li>3. 停留在中心, 不要接触侧面</li>

<li>4. 使用不易破坏的白点。</li>

<li>5. 通过到处移动来获得额外的分数。</li>

<li>6. 活下去</li>

</ul>

<a href="#" class="btn"

id="startButton">Play</a>

</div>

</div>

<script>

SinuousWorld = new function(){

var isMobile =

(navigator.userAgent.toLowerCase().indexOf

('android') != -1) ||

(navigator.userAgent.toLowerCase().indexOf

('iphone') != -1);

var SCREEN_WIDTH = window.innerWidth;

var SCREEN_HEIGHT = window.innerHeight;

var canvas;

var context;

var status;

var message;

var title;

var startButton;

var enemies = [];

var boosts = [];

var particles = [];

var player;

var mouseX = (window.innerWidth -

SCREEN_WIDTH);

var mouseY = (window.innerHeight -

SCREEN_HEIGHT);

var mouseIsDown = false;

var playing = false;

var score = 0;

var time = 0;

var velocity = { x: -1.3, y: 1 };

var difficulty = 1;

this.init = function(){

canvas = document.getElementById('world');

status = document.getElementById('status');

message = document.getElementById

('message');

title = document.getElementById('title');

startButton = document.getElementById

('startButton');

if (canvas && canvas.getContext) {

context = canvas.getContext('2d');

// Register event listeners

document.addEventListener('mousemove',

documentMouseMoveHandler, false);

document.addEventListener('mousedown',

documentMouseDownHandler, false);

document.addEventListener('mouseup',

documentMouseUpHandler, false);

canvas.addEventListener('touchstart',

documentTouchStartHandler, false);

document.addEventListener('touchmove',

documentTouchMoveHandler, false);

document.addEventListener('touchend',

documentTouchEndHandler, false);

window.addEventListener('resize',

windowResizeHandler, false);

startButton.addEventListener('click',

startButtonClickHandler, false);

player = new Player();

windowResizeHandler();

setInterval(loop, 3000 / 100);

}

};

function startButtonClickHandler(event){

event.preventDefault();

if( playing == false ) {

playing = true;

enemies = [];

boosts = [];

score = 0;

difficulty = 1;

player.trail = [];

player.position.x = mouseX;

player.position.y = mouseY;

player.boost = 0;

message.style.display = 'none';

status.style.display = 'block';

time = new Date().getTime();

}

}

function gameOver() {

playing = false;

message.style.display = 'block';

title.innerHTML = 'You Lost( ' + Math.round

(score ) + ' points)';

}

function documentMouseMoveHandler(event){

mouseX = event.clientX - (window.innerWidth

- SCREEN_WIDTH) * .5 - 10;

mouseY = event.clientY - (window.innerHeight

- SCREEN_HEIGHT) * .5 - 10;

}

function documentMouseDownHandler(event){

mouseIsDown = true;

}

function documentMouseUpHandler(event) {

mouseIsDown = false;

}

function documentTouchStartHandler(event) {

if(event.touches.length == 1) {

event.preventDefault();

mouseX = event.touches[0].pageX -

(window.innerWidth - SCREEN_WIDTH) * .5;

mouseY = event.touches[0].pageY -

(window.innerHeight - SCREEN_HEIGHT) * .5;

mouseIsDown = true;

}

}

function documentTouchMoveHandler(event) {

if(event.touches.length == 1) {

event.preventDefault();

mouseX = event.touches[0].pageX -

(window.innerWidth - SCREEN_WIDTH) * .5;

mouseY = event.touches[0].pageY -

(window.innerHeight - SCREEN_HEIGHT) * .5;

}

}

function documentTouchEndHandler(event) {

mouseIsDown = false;

}

function windowResizeHandler() {

SCREEN_WIDTH = window.innerWidth;

SCREEN_HEIGHT = window.innerHeight;

canvas.width = SCREEN_WIDTH;

canvas.height = SCREEN_HEIGHT;

var cvx = (window.innerWidth - SCREEN_WIDTH)

* .5;

var cvy = (window.innerHeight -

SCREEN_HEIGHT) * .5;

canvas.style.position = 'absolute';

canvas.style.left = cvx + 'px';

canvas.style.top = cvy + 'px';

message.style.left = cvx + 'px';

message.style.top = cvy + 200 + 'px';

}

function createParticles( position, spread,

color ) {

var q = 10 + ( Math.random() * 15 );

while( --q >= 0 ) {

var p = new Particle();

p.position.x = position.x + ( Math.sin(q)

* spread );

p.position.y = position.y + ( Math.cos(q)

* spread );

p.velocity = { x: -4 + Math.random() * 8,

y: - 4 + Math.random() * 8 };

p.alpha = 1;

particles.push( p );

}

}

function loop() {

context.clearRect

(0,0,canvas.width,canvas.height);

var svelocity = { x: velocity.x *

difficulty, y: velocity.y * difficulty };

var i, j, ilen, jlen;

if( playing ) {

difficulty += 0.0008;

pp = player.clonePosition();

player.position.x += ( mouseX -

player.position.x ) * 0.13;

player.position.y += ( mouseY -

player.position.y ) * 0.13;

score += 0.4 * difficulty;

score += player.distanceTo( pp ) * 0.1;

player.boost = Math.max( player.boost - 1,

0 );

if( player.boost > 0 && ( player.boost >

100 || player.boost % 2 != 0 ) ) {

context.beginPath();

context.fillStyle = '#fa3380';

context.strokeStyle = 'rgba

(2,179,228,0.8)';

context.arc(player.position.x,

player.position.y, player.size*2, 0, Math.PI*2,

true);

context.fill();

context.stroke();

}

player.trail.push( new Point(

player.position.x, player.position.y ) );

context.beginPath();

context.strokeStyle = '#fa3380';

context.lineWidth = 3;

for( i = 0, ilen = player.trail.length; i

< ilen; i++ ) {

p = player.trail[i];

context.lineTo( p.position.x,

p.position.y );

p.position.x += svelocity.x;

p.position.y += svelocity.y;

}

context.stroke();

context.closePath();

if( player.trail.length > 40 ) {

player.trail.shift();

}

context.beginPath();

context.fillStyle = 'deepskyblue';

context.arc(player.position.x,

player.position.y, player.size/2, 0, Math.PI*2,

true);

context.fill();

}

if( playing && ( player.position.x < 0 ||

player.position.x > SCREEN_WIDTH ||

player.position.y < 0 || player.position.y >

SCREEN_HEIGHT ) ) {

gameOver();

}

for( i = 0; i < enemies.length; i++ ) {

p = enemies[i];

if( playing ) {

if( player.boost > 0 && p.distanceTo(

player.position ) < ( ( player.size * 4 ) +

p.size ) * 0.5 ) {

createParticles( p.position, 10 );

enemies.splice( i, 1 );

i --;

score += 10;

continue;

}

else if( p.distanceTo( player.position )

< ( player.size + p.size ) * 0.5 ) {

createParticles( player.position, 10

);

gameOver();

}

}

context.beginPath();

context.fillStyle = 'white';

context.arc(p.position.x, p.position.y,

p.size/1, 0, Math.PI*2, true);

context.fill();

p.position.x += svelocity.x * p.force;

p.position.y += svelocity.y * p.force;

if( p.position.x < 0 || p.position.y >

SCREEN_HEIGHT ) {

enemies.splice( i, 1 );

i --;

}

}

for( i = 0; i < boosts.length; i++ ) {

p = boosts[i];

if( p.distanceTo( player.position ) < (

player.size + p.size ) * 0.5 && playing ) {

player.boost = 2000;

for( j = 0; j < enemies.length; j++ ) {

e = enemies[j];

if( e.distanceTo( p.position ) < 100 )

{

createParticles( e.position, 10 );

enemies.splice( j, 1 );

j--;

score += 10;

}

}

}

context.beginPath();

context.fillStyle = 'lightgreen';

context.arc(p.position.x, p.position.y,

p.size/1, 0, Math.PI*2, true);

context.fill();

p.position.x += svelocity.x * p.force;

p.position.y += svelocity.y * p.force;

if( p.position.x < 0 || p.position.y >

SCREEN_HEIGHT || player.boost != 0 ) {

boosts.splice( i, 9 );

i --;

}

}

if( enemies.length < 25 * difficulty ) {

enemies.push( positionNewOrganism( new

Enemy() ) );

}

if( boosts.length < 1 && Math.random() >

0.997 && player.boost == 0 ) {

boosts.push( positionNewOrganism( new

Boost() ) );

}

for( i = 0; i < particles.length; i++ ) {

p = particles[i];

p.velocity.x += ( svelocity.x -

p.velocity.x ) * 0.04;

p.velocity.y += ( svelocity.y -

p.velocity.y ) * 0.04;

p.position.x += p.velocity.x;

p.position.y += p.velocity.y;

p.alpha -= 0.02;

context.fillStyle = 'rgba

(2,179,228,0.8)'+Math.max(p.alpha,0)+')';

context.fillRect( p.position.x,

p.position.y, 1, 1 );

if( p.alpha <= 0 ) {

particles.splice( i, 1 );

}

}

if( playing ) {

scoreText = 'Score: <span>' + Math.round(

score ) + '</span>';

scoreText += ' Time: <span>' + Math.round(

( ( new Date().getTime() - time ) / 1000 ) * 100

) / 100 + 's</span>';

status.innerHTML = scoreText;

}

}

function positionNewOrganism( p ) {

if( Math.random() > 0.5 ) {

p.position.x = Math.random() *

SCREEN_WIDTH;

p.position.y = -20;

}

else {

p.position.x = SCREEN_WIDTH + 20;

p.position.y = (-SCREEN_HEIGHT * 0.2) + (

Math.random() * SCREEN_HEIGHT * 1.2 );

}

return p;

}

};

/**

*

*/

function Point( x, y ) {

this.position = { x: x, y: y };

}

Point.prototype.distanceTo = function(p) {

var dx = p.x-this.position.x;

var dy = p.y-this.position.y;

return Math.sqrt(dx*dx + dy*dy);

};

Point.prototype.clonePosition = function() {

return { x: this.position.x, y:

this.position.y };

};

/**

*

*/

function Player() {

this.position = { x: 0, y: 0 };

this.trail = [];

this.size = 8;

this.boost = 0;

}

Player.prototype = new Point();

/**

*

*/

function Enemy() {

this.position = { x: 0, y: 0 };

this.size = 6 + ( Math.random() * 4 );

this.force = 1 + ( Math.random() * 0.4 );

}

Enemy.prototype = new Point();

/**

*

*/

function Boost() {

this.position = { x: 0, y: 0 };

this.size = 10 + ( Math.random() * 8 );

this.force = 1 + ( Math.random() * 0.4 );

}

Boost.prototype = new Point();

/**

*

*/

function Particle() {

this.position = { x: 0, y: 0 };

this.force = 1 + ( Math.random() * 0.4 );

this.color = '#fa3380';

}

Particle.prototype = new Point();

SinuousWorld.init();

</script>

<div style="text-align:center;">

</div>

</body>

</html>

相关链接：https://ke.qq.com/course/256212?flowToken=1001258

有不懂得可以问我哦2220992881

xiaohuli414
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas动画 人物怪物移动 鼠标点击控制
11-29
一个canvas制作的人物移动，鼠标控制移动实例
html5 人物图片动态效果,css3鼠标滑过菜单显示人物图片特效
weixin_39581972的博客
06-03 291
这是一款效果很酷的css3鼠标滑过菜单显示人物图片特效。该效果是当鼠标滑过菜单时会有相应的图片从左边向右边滑出来。HTML下面是第一个demo的代码。菜单使用无序列表来制作。每一个菜单按钮都是一个li，在其中包含一个超链接和一张图片，超链接中又包含两个span。Art DirectorHenry James CSS我们将给.mh-menu li a设置为块级元素并将它的背景色设置为r...
[unity3d]鼠标点击地面人物自动走动(也包含按键wasd&space控制)
热门推荐
luyuncsd123的专栏
02-28 1万+
在漫游游戏中常用的功能就是人物在场景中行走，必要的功能就是鼠标点击地面人物就朝着那个方向行走，键盘方向键前后左右也能控制人物的行走和跳跃，在官方自带的第三人称视角中做了一点修改，官方自带的ThirdPersonController中的摄像机自动指向人物的背面，这样不能看到人物的正面或者侧面，对ThirdPersonController脚本做了修改之后，可以旋转摄像机的视角，可以摄像机跟随，类似sm
html跟鼠标移动,在HTML5相对鼠标移动
weixin_42104947的博客
06-04 137
我敢肯定，只有这样，才能获得相对鼠标COORDS用JavaScript(HTML5规范没有改变这一点)是从当前鼠标的位置和以前的鼠标位置计算它 - 或者使用的OnMouseMove。正如你可能知道的，这会不会当光标不能实际移动(在触摸窗口边框例如)工作 P> 在关闭的机会，我错了，你可以采取的WebGL演示搜索。由于有必然是一个3D射击演示，或许他们可以应用基于鼠标控制解决方案。 P>...
实现窗口动漫人物眼睛跟随鼠标滚动
weixin_44646763的博客
03-27 1751
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .figure{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-90px); } .renwu_main{ wi
H5小游戏源码 快來打我呀！.zip
10-14
《H5小游戏源码 快來打我呀！》是一个基于HTML5技术开发的互动小游戏。HTML5作为现代网页开发的主流标准，以其强大的功能和跨平台性深受开发者喜爱。这款名为“快來打我呀！”的小游戏源码，为我们揭示了如何利用...
h5小程序-大家来找茬（找不同）,手机h5小游戏.zip
11-13
【标题】"h5小程序-大家来找茬（找不同）,手机h5小游戏.zip" 提供了一个关于H5游戏开发的场景，这是一个基于H5技术的手机小游戏，名为"大家来找茬"，也称为"找不同"游戏。这类游戏通常需要玩家在两张看似相同的图片...
H5小游戏源码 中秋吃月饼大赛,吃货来挑战！！！.zip
10-15
【标题】"H5小游戏源码 中秋吃月饼大赛,吃货来挑战！！！.zip" 是一个包含H5小游戏源代码的压缩包，专为中秋节设计，旨在提供一种互动娱乐方式，让玩家在游戏中享受吃月饼的乐趣。H5小游戏通常指的是基于HTML5技术...
H5小游戏源码 免费WiFi邀您来挑战!.zip
10-14
《H5小游戏源码解析与应用探讨》 在数字化时代，H5小游戏因其轻便、易分享、跨平台的特性，已经成为互联网娱乐领域的一股热潮。本篇文章将深入解析“H5小游戏源码 免费WiFi邀您来挑战!”这款小游戏的源码，帮助...
H5小游戏源码 秀恩爱，shi得快！.zip
10-15
"这款H5小游戏源码提供了深入理解H5游戏开发的机会，让我们一起探讨其中包含的知识点。 首先，HTML5是现代网页开发的核心标准，它的出现极大地增强了Web应用的功能，特别是对于游戏开发而言。HTML5引入了Canvas元素...
HTML5 canvas飞机飞行轨迹动画.zip
05-23
HTML5 canvas飞机飞行轨迹动画代码，飞机飞行动态背景，四架飞机飞行线条轨迹动画。
记录鼠标移动轨迹
01-17
记录鼠标移动轨迹。最简单的代码。一看就懂。。。。。。。。。
html5制作人物动作,骨骼动画制作新利器：快速制作动作人物动画，省时简单！...
weixin_39566773的博客
06-23 1140
今天小编就给大家推制作动画人物/角色的骨骼动画软件【软件介绍】万彩骨骼大师是一款专业制作2D动画人物/角色的软件，可以让不具备角色动画制作的新手用户，只需几步，就能把静态图片转变为生动的动画角色，实现眨眼、微笑、挥手、移动、跑步、跳跃、旋转等一系列动画动作，轻松设计动作人物动画。【软件效果展示】静态人物 vs 动态人物效果静态球体 vs 动态球体效果【初始界面】【制作方式】(一)从模型创建软件内置...
html5 人物行走
飘羽逸狂
07-25 993
html5 人物行走
HTML5火球挡板碰撞动画游戏,7 个让人惊叹的 HTML5 鼠标动画
weixin_42624889的博客
06-03 257
今天我们一起来分享一些有趣的HTML5鼠标动画，当我们移动鼠标时，页面上将会出现一些神奇的动画特效。当然这些动画可能在实际应用中并不太会使用到，但是对大家研究HTML5和CSS3的帮助应该会非常大。本文分享的7个HTML5鼠标动画都提供源代码下载，都是一些不错的资源。1、HTML5鲸鱼动画今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML...
十二、HTML5鼠标经过粒子散开动画特效
qq_52916408的博客
07-14 966
一、效果图 二、index.html源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5鼠标经过粒子散开动画特效</title> <style> html, body { position: absolute; overflow: hidden;
移动端h5游戏开发中的动画和动效展示
莉兹Liz的博客
02-15 4108
在移动端h5游戏开发中，经常会遇到动画和动效的展现需求，比较常用的实现方法有css3、svg、定时器等，针对不同的场景和需求使用不同的技术，可以提升设计和开发的效率，保证产品的效果和质量，也能让用户有更好的体验，以下是项目开发中使用过的动效例子。 一、css3 css3动画三剑客animation, transform, transition，项目中主要用到css3 animation，下面会进行重点介绍。 css3 animation主要由三部分组成，关键帧、动画属性和css属性。 关键帧@keyfram
【第1165期】H5动画：轨迹移动
前端早读课
01-10 2829
前言前一段时间被各种H5总结刷屏，除了内容以及设计之外在动画方面在其表现方面也起到了很大的加持作用，渐渐的动画也成为了一个产品所不可缺少的一个元素。2017年1月11号早读文章由凹凸实验室@Avin授权分享。正文从这开始～动画，是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。在 Web 开发中，经常需要实现各种动画效果，例如：移动、变
H5动画：轨迹移动
凹凸实验室
11-06 1573
动画，是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。在 Web 开发中，经常需要实现各种动画效果，例如：移动、变形、透明度变化等，今天我们主要来讨论各种移动的实现。直线移动通常可以直接由各个点的位置，以及到点的时间与整个动画持续时间的比值，写出类似下面的代码并可实现动画。12345678910.cray { animation: ...
2023全新crmeb商城改版盲盒源码:双端加h5+小程序全开源
最新发布
11-11
总的来说，2023全新crmeb商城改版盲盒源码的双端加H5小程序全开源为用户带来了更加方便、有趣的购物体验，同时也为商家和平台运营商带来了更多的商机和盈利空间。这一全新版本的商城源码必将受到用户和行业的广泛...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值