gametest

(function () {

const screenWidth = document.documentElement.clientWidth;

const cloudFrequency = 30;

const cloudSpeed = 2;

let lastCreateTime = 0;

function createCloud() {

let now = new Date().getTime()

if (now - lastCreateTime > 3000) {

// 创建云朵

let cloudItem = document.createElement('div')

cloudItem.className = 'cloud-item'

// 设置云朵变化系数

cloudItem.cloudScale = Math.random()

// 设置云朵大小

cloudItem.style.transform = 'scale(' + cloudItem.cloudScale + ')'

// 设置云朵透明度

cloudItem.style.opacity = cloudItem.cloudScale

// 设置云朵位置

let _left = screenWidth

cloudItem.style.left = _left + 'px'

let _top = Math.random() * 400

cloudItem.style.top = _top + 'px'

const cloudWrap = document.getElementsByClassName('cloud-container')[0];

cloudWrap.appendChild(cloudItem)

// 云朵移动

let cloudMove = () => {

// 云朵越大，移动速度越快

let moveX = cloudSpeed * cloudItem.cloudScale

let _left = +cloudItem.style.left.slice(0, -2)

cloudItem.style.left = _left - moveX + 'px'

// 如果云朵距离屏幕顶部距离大于等于屏幕高度，则移除此云朵

if (cloudItem.offsetLeft < (-cloudItem.offsetWidth)) {

cloudWrap.removeChild(cloudItem)

} else {

requestAnimationFrame(cloudMove)

}

}

cloudMove()

cloudMove()

lastCreateTime = now

}

requestAnimationFrame(createCloud)

};

createCloud();

})()

function createStore(params) {

let state = { ...params };

let listeners = [];

function subscribe(fn) {

listeners.push(fn);

}

function getState() {

return state;

}

function dispatch() {

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

const listener = listeners[i];

listener(state);

}

}

function setState(newState, isDispatch = true) {

state = { ...newState };

isDispatch && dispatch();

}

const store = {

subscribe,

getState,

setState,

dispatch,

}

return store;

}

const store = createStore({ state: 'stand' });

let canOperate = true;

document.addEventListener('keydown', (e) => {

if (canOperate) {

canOperate = false;

if (e.key === 'w') {

store.setState({ state: 'jump' });

setTimeout(() => {

store.setState({

state: 'run'

})

canOperate = true;

}, 700);

} else if (e.key === 's') {

store.setState({ state: 'slide' });

setTimeout(() => {

store.setState({

state: 'run'

})

canOperate = true;

}, 700);

}

}

})

export default store;

import store from './createStore.js';

(function() {

store.subscribe((state) => {

if (state.gameState === 'fail') {

} else {

}

})

})()

(function () {

const speed = 1;

let total;

function groundScroll() {

let ground = document.querySelector('.ground-wrap');

let _left = 0

ground.style.backgroundPositionX = _left + 'px';

let cityMove = () => {

if (_left <= -600) {

_left = 0

}

_left -= speed * 3

total += (speed / 10)

if (total >= 40000) {

speed = 6

} else if (total >= 4000) {

speed = 5.5

} else if (total >= 2000) {

speed = 5

} else if (total >= 1000) {

speed = 4.5

} else if (total >= 500) {

speed = 4

} else if (total >= 200) {

speed = 3.5

}

ground.style.backgroundPositionX = _left + 'px';

groundMoveInterval = requestAnimationFrame(cityMove)

}

cityMove()

}

groundScroll();

})()